<template>
  <div>
    <top-nav/>
    <div class="about-me">
      <img :src="banner" alt="" style="width: 100%;height: 320px;object-fit: cover;">
      <img :src="qrCode" class="qr-code">
    </div>
    <div class="content">
      <div class="title"><span style="color: #9f9f9f">公众号：</span>hd博客</div>
    </div>
  </div>
</template>
<script>
import topNav from '@/components/topNav'
export default {
  components: {
    topNav
  },
  data() {
    return {
      banner: require('@/assets/banner.jpg'),
      qrCode: require('@/assets/qrcode.jpg'),
      onType: 'onList'
    }
  },
  mounted() {},
  methods: {
    // [this.onType] (text) {
    //   console.log(text)
    // }
  }
}
</script>
<style lang="scss" scoped>
.about-me{
  max-width: 1190px;
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  font-size: 0;
  .qr-code{
    position: absolute;
    right: calc((320px - 150px) / 2);
    top: calc((320px - 150px) / 2);
    height: 150px;
  }
}
.content{
  max-width: 1190px;
  width: 100%;
  margin: 10px auto 0;
  background: #eee;
  border-radius: 4px;
  .title{
    padding: 10px;
    font-size: 16px;
    color: #656565;
  }
}
</style>